<!DOCTYPE html>
<html lang="en">
<!-- <script >
        
        function addListenerPage() {
            try {
                // window.addEventListener("pageshow", () => {
                //     window.timeStr = new Date().getTime()
                //     alert("开始监控")
                // });
                window.addEventListener("load", () => {
                    window.timeStr = new Date().getTime()
                    alert("开始监控")
                });
                // history
                window.addEventListener('pagehide', () => {
                    let t = (new Date().getTime() - window.timeStr) / 1000
                    localStorage.setItem("time", t)
                    window.timeStr = new Date().getTime()
                    let result = {
                        curTime: new Date(),
                        url: window.location.href,
                        stayTime: localStorage.getItem("time")
                    };
                    //重置数据
                    window.timeStr = new Date().getTime()
                    //发送监控数据
                    console.table(result)
                    // localStorage.clear("timestr")
                    // alert("停留了"+localStorage.getItem("time")+"秒")
                })

                // onhashchange 是vue的
                window.addEventListener('hashchange', () => {
                    let t = (new Date().getTime() - window.timeStr) / 1000
                    localStorage.setItem("time", t)
                    window.timeStr = new Date().getTime()
                    let result = {
                        curTime: new Date(),
                        url: window.location.href,
                        stayTime: localStorage.getItem("time")
                    };
                    //重置数据
                    window.timeStr = new Date().getTime()
                    //发送监控数据
                    console.table(result)
                    // localStorage.clear("timestr")
                    // alert("停留了"+localStorage.getItem("time")+"秒")
                })


            } catch (error) {
                console.log("性能信息上报异常", error);
            }
           
        }
        addListenerPage()
    </script> -->
<script>
    function addMonitorElement(idName) {
        
        function timer(n_hour, n_min, n_sec) {
            // var n_sec = 0; //秒
            // var n_min = 0; //分
            // var n_hour = 0; //时
            console.log(n_hour, n_min, n_sec)
            return setInterval(function () {

                window.str_sec = n_sec;
                window.str_min = n_min;
                window.str_hour = n_hour;
                if (window.str_sec < 10) {
                    // window.str_sec = "0" + n_sec;
                    window.str_sec = n_sec;
                }
                if (window.str_min < 10) {
                    // window.str_min = "0" + n_min;
                    window.str_min = n_min;
                }
                if (window.str_hour < 10) {
                    // window.str_hour = "0" + n_hour;
                    window.str_hour = n_hour;
                }
                var time = window.str_hour + ":" + window.str_min + ":" + window.str_sec;
                console.log(time, "时间")
                n_sec++;
                if (n_sec > 59) {
                    n_sec = 0;
                    n_min++;
                }
                if (n_min > 59) {
                    n_sec = 0;
                    n_hour++;
                }
            }, 1000);
        }
        //暂停
        window.isFirstEle = true
        window.str_hour=0,window.str_min=0, window.str_sec = 0
        

        this.idName = idName
        function handleScroll() {
            // 距顶部 有指定了DTD 是前者（DOCTYPE） 不然是后者
            // safiri的函数  window.pageYOffset 
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            // 可视区高度
            var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
            // 元素位置
            // console.log("id的name：" + idName + "  new之后这个没有值，前面的有值 this.idname：" + this.idName)
            var eleHeight = document.getElementById(idName).offsetTop
            // console.log("bu能看见元素",eleHeight,scrollTop,clientHeight)
            //元素高度
            // var Height = Number(document.getElementById("blue").style.height.replace('px', ''))
            var Height = Number(document.getElementById(idName).offsetHeight)
            if (eleHeight < clientHeight + scrollTop + 20 && clientHeight + scrollTop + 20 < eleHeight + Height + window.innerHeight) {
                console.log("能看见元素", eleHeight, scrollTop, clientHeight)
                //初始化计时器
                if (window.isFirstEle == true) {
                    window.n_timer = timer(0, 0, 0);
                    window.isFirstEle=false
                } else {             
                    clearInterval(window.n_timer);
                    window.n_timer = timer(window.str_hour, window.str_min, window.str_sec);
                }
            } else {
                clearInterval(window.n_timer);
            }


        }
        function thorttle(fn, time) {
            window.flag = null;
            return function () {
                if (!window.flag) {
                    window.flag = true;
                    fn();
                    setTimeout(() => {
                        window.flag = false;
                    }, time)
                }
            }
        }
        // 滚动节流
        const throttleHandleScroll = thorttle(handleScroll, 100)
        // 监听滚动
        window.addEventListener('scroll', throttleHandleScroll);
    }
    addMonitorElement("blue")
</script>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div style="background-color: red;width:500px;height:1000px"></div>
    <div id="blue" style="background-color: blue;width:500px;height:1000px"></div>
    <div style="background-color: red;width:500px;height:1000px"></div>
</body>

</html>